<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="无车号预留可用车列表"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'900px'"
    >
      <div style="margin-bottom: 15px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="plateNum" label="车牌号"> </el-table-column>
          <el-table-column prop="mainDriver.driver.realName" label="驾驶员">
          </el-table-column>
          <el-table-column prop="mainDriver.driver.phone" label="电话">
          </el-table-column>

          <el-table-column prop="seats" label="座位"> </el-table-column>
          <el-table-column prop="addTime" label="添加时间"> </el-table-column>
          <el-table-column prop="vehicleType" label="车辆类型">
            <template slot-scope="scope">
              {{ getVehicleType(scope.row.vehicleType) }}
            </template>
          </el-table-column>
          <el-table-column prop="powerSource" label="动力来源">
            <template slot-scope="scope">
              {{ getPowerSource(scope.row.powerSource) }}
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="停靠方向"> </el-table-column>
          <el-table-column prop="purchaseDate" label="行驶证购车日期">
          </el-table-column>
          <el-table-column prop="drivingType" label="驾照需求">
          </el-table-column>
          <el-table-column prop="mileage" label="续航里程"> </el-table-column>
          <el-table-column prop="carPhotoUrl" label="车辆外观" width="300">
            <template slot-scope="scope">
              <div>
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[0]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[0] || ''"
                  alt="暂无图片"
                />,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[1]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[1] || ''"
                  alt="暂无图片"
                />
                ,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[2]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[2] || ''"
                  alt="暂无图片"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carPlateUrl" label="车辆名牌" width="300">
            <template slot-scope="scope">
              <div>
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPlateUrl)[0]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPlateUrl)[0] || ''"
                  alt="暂无图片"
                />
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPlateUrl)[1]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPlateUrl)[1] || ''"
                  alt="暂无图片"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carLwh" label="车辆长宽高" width="120">
            <template slot-scope="scope">
              <div>长:{{ getlicensePhotoUrl(scope.row.carLwh)[0] || 0 }}cm</div>
              <div>宽:{{ getlicensePhotoUrl(scope.row.carLwh)[1] || 0 }}cm</div>
              <div>高:{{ getlicensePhotoUrl(scope.row.carLwh)[2] || 0 }}cm</div>
            </template>
          </el-table-column>
          <el-table-column prop="carColor" label="车辆颜色" width="120">
            <template slot-scope="scope">
              <span v-html="getCarColor(scope.row.carColor)"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="operationPhotoUrl"
            label="运营证正反面"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="getlicensePhotoUrl(scope.row.operationPhotoUrl)[0]">
                  正面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.operationPhotoUrl)[0] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
                <span v-if="getlicensePhotoUrl(scope.row.operationPhotoUrl)[1]">
                  反面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.operationPhotoUrl)[1] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="licensePhotoUrl"
            label="驾驶证正反面"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="getlicensePhotoUrl(scope.row.licensePhotoUrl)[0]">
                  正面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.licensePhotoUrl)[0] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
                <span v-if="getlicensePhotoUrl(scope.row.licensePhotoUrl)[1]">
                  反面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.licensePhotoUrl)[1] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseDate" label="注册上户日期" width="200">
          </el-table-column>
          <!-- <el-table-column prop="carUsage" label="车辆性质" width="120">
            <template slot-scope="scope">
              {{ getCusUsage(scope.row.carUsage) }}
            </template>
          </el-table-column> -->
          <el-table-column
            prop="ownPurchaseDate"
            label="本公司购买日期"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="dockedLatLon"
            label="停靠地址经纬度"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                经度:{{ getlicensePhotoUrl(scope.row.dockedLatLon)[0] || 0 }}
              </div>
              <div>
                纬度:{{ getlicensePhotoUrl(scope.row.dockedLatLon)[1] || 0 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="dockedAddress" label="停靠位置">
          </el-table-column>
          <!-- 
          <el-table-column prop="reserveStime" label="开始时间">
          </el-table-column>
          <el-table-column prop="reserveEtime" label="结束时间">
          </el-table-column>
          <el-table-column prop="reserveCount" label="预留数量">
          </el-table-column> -->

          <!-- <el-table-column prop="note" label="预留说明"> </el-table-column>
          <el-table-column prop="opra" label="操作" width="100">
            <template slot-scope="scope"
              ><el-button type="text" @click="handleSearchCar(scope)"
                >查看车辆</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="rows"
        @pagination="getDgList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import moment from "moment";
import { findReserveEmptyCar } from "@/api/services/logistics.service";
import Pagination from "@/components/Pagination";
export default {
  name: "LeaveCarList",
  directives: { elDragDialog },
  props: ["state", "rowCar"],
  components: { Pagination },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
    /** 获取-车辆性质 */
    getCusUsage() {
      return function (val) {
        switch (val) {
          case "TRAVELTRANS":
            return "旅游客运";
          case "TRAVELTRANSNET":
            return "旅游客运上网";
          case "HIGHWAYTRANS":
            return "公路客运";
          case "HIGHWAYTRANSNET":
            return "公路客运上网";
          case "LEASE":
            return "租赁";
          default:
            return "";
        }
      };
    },
    /** 获取-车辆类型 */
    getVehicleType() {
      return function (val) {
        switch (val) {
          case "BUS":
            return "大巴车";
          case "MINIBUS":
            return "中巴车";
          case "MPV":
            return "商务车";
          case "SUV":
            return "越野车";
          case "CAR":
            return "轿车";
          case "BMPV":
            return "保姆车";
          default:
            return "";
        }
      };
    },
    /** 获取-运营类型 */
    getServiceType() {
      return function (val) {
        switch (val) {
          case "COUNTY_SER":
            return "县际业务";
          case "CITY_SER":
            return "市际业务";
          case "PROVINCE_SER":
            return "省际业务";
          default:
            return "";
        }
      };
    },
    /** 获取-动力来源 */
    getPowerSource() {
      return function (val) {
        switch (val) {
          case "DIESEL":
            return "柴油";
          case "GASOLINE":
            return "汽油";
          case "CNG":
            return "CNG";
          case "NEWENERGY":
            return "新能源";
          default:
            return "";
        }
      };
    },
    /** 获取-可跑区域 */
    getRunningArea() {
      return function (val) {
        switch (val) {
          case 1:
            return "省际包车";
          case 2:
            return "市际包车";
          case 3:
            return "县际包车";
          default:
            return "";
        }
      };
    },

    // 获取车辆颜色
    getCarColor() {
      return function (val) {
        switch (val) {
          case "RED":
            return "红色";
          case "YELLOW":
            return "黄色";
          case "GREEN":
            return "绿色";
          case "BLUE":
            return "蓝色";
          case "WHITE":
            return "白色";
          case "VIOLET":
            return "紫色";
          case "BLACK":
            return "黑色";
          default:
            return "";
        }
      };
    },
  },

  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      page: 1,
      rows: 10,
      total: 0,
      tableData: [],
      md: {
        state: this.state,
      },

      fm: {
        fname: "AddMaintenance",
        sb: { load: false, text: "修改预留信息" },
      },
    };
  },
  created() {
    this.getDgList();
  },
  methods: {
    getlicensePhotoUrl(val) {
      let url = (val || "").split(",");
      if(url) this.fileBaseUrl + url;
      return url;
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      const { reserveEtime, reserveStime, seats } = this.rowCar;
      findReserveEmptyCar({
        reserveEtime,
        reserveStime,
        seats,
      })
        .then((res) => {
          console.log("res1sadasdasd23", res);
          this.U.qclose(loading);
          const { code, data } = res;
          if (code === 1) {
            // this.seatsList = data;
            this.total = res.count;
            this.tableData = data;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("addCarMdState", false);
    },
  },
};
</script>